<!-- 顶部位置 -->
<template>
  <Card class="card_vue">
    <template v-slot:content>
      <div class="nav_box">
        <div class="nav_left" @click="goHome">
          <img class="logo_svg" :src="logoSvg" alt="" />
          <h1>曙光</h1>
        </div>
        <div class="nav_right">
          <div class="nav_blog" @click="goHome">博客</div>
          <div class="nav_action" @click="getProject">项目</div>
          <img class="nav_img" :src="searchSvg" alt="" />
          <img class="nav_img" :src="gitHubSvg" alt="" @click="getGitHuib" />
          <img
            @click="changeHeight"
            class="nav_img"
            :src="flag == 0 ? sunSvg : nightSvg"
            alt=""
          />
        </div>
      </div>
    </template>
  </Card>
</template>
<script lang="ts" setup>
import searchSvg from "@/assets/svg/search.svg";
import sunSvg from "@/assets/svg/sun.svg";
import nightSvg from "@/assets/svg/night.svg";
import gitHubSvg from "@/assets/svg/github.svg";
import logoSvg from "@/assets/svg/logo.svg";
import Card from "@/components/Card.vue";
import ForIcon from "@/components/ForIcon.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

onMounted(() => {});

const getGitHuib = () => {
  window.open("https://gitee.com/caoshuguang/blog-warehouse");
};

const getProject = () => {
  router.push("/project");
};

const goHome = () => {
  router.push("/");
};

//? 切换主题
const flag = ref<number>(0);
const changeHeight = () => {
  let app = document.getElementById("app");
  if (!app) return;
  if (flag.value == 0) {
    app.style.filter = "invert(1)";
    flag.value = 1;
    return;
  }
  if (flag.value == 1) {
    app.style.filter = "invert(0)";
    flag.value = 0;
  }
};
</script>
<style lang="scss" scoped>
.nav_box {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: $color_white;
  cursor: pointer;
  .nav_left {
    display: flex;
    align-items: center;
    .logo_svg {
      width: 60px;
      height: 60px;
    }
    h1 {
      margin: 0px 10px;
    }
  }
  .nav_right {
    display: flex;
    align-items: center;

    .nav_blog {
      font-size: $fs_title;
      margin: 0px 10px;
    }
    .nav_action {
      font-size: $fs_title;
      margin: 0px 10px;
    }
    .nav_img {
      width: 20px;
      height: 20px;
      margin: 0px 10px;
    }
  }
}

::v-deep .el-card__body {
  padding: 5px;
}
</style>
